<template>
	<view class="wrap">
		<u-navbar title="个人信息"></u-navbar>
		<view class="group u-m-t-20" @tap="chooseAvatar">
			<view class="label u-font-30">头像</view>
			<u-avatar :src="userInfo.avatarUrl" size="100" mode="square"></u-avatar>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</view>
		<navigator url="/pages/my/archive/number" hover-class="none" class="group u-border-bottom u-m-t-20">
			<view class="label u-font-30">用户号</view>
			<text class="u-font-28 text-gray">{{userInfo.userNum}}</text>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</navigator>
		<view @tap="toEditNick" url="/pages/my/archive/nick" class="group u-border-bottom">
			<view class="label u-font-30">昵称</view>
			<text class="u-font-28 text-gray">{{userInfo.userName}}</text>
			<view class="arrow">
				<text v-if="nickEdit" class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</view>
		<view class="group u-border-bottom" @tap="chooseGender">
			<view class="label u-font-30">性别</view>
			<text class="u-font-28 text-gray">{{userInfo.sex|sex}}</text>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</view>
		<navigator url="/pages/my/archive/bindPhone" hover-class="none" class="group u-border-bottom">
			<view class="label u-font-30">手机号</view>
			<text class="u-font-28 text-gray">{{userInfo.mobile}}</text>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</navigator>
		<navigator url="/pages/my/archive/motto" hover-class="none" class="group u-border-bottom">
			<view class="label u-font-30">个性签名</view>
			<text style="max-width: 300rpx;" class="u-font-28 text-gray u-line-1">{{userInfo.profiles}}</text>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</navigator>
		<navigator url="/pages/my/archive/qrcode" hover-class="none" class="group u-border-bottom">
			<view class="label u-font-30">二维码名片</view>
			<u-icon size="28" color="#999" name="grid"></u-icon>
			<view class="arrow">
				<text class="u-m-l-10 iconfont icon-arrow-right u-font-28 text-gray"></text>
			</view>
		</navigator>
		<u-select 
			v-model="select.show" 
			:list="select.options" 
			:default-value="select.current"
			@confirm="resolve"
			@cancel="reject"
		></u-select>
	</view>
</template>

<script>
	import {jumpTo,toast} from "@/utils/util.js"
	import {modifyUser} from "@/api/user.js"
	import * as fileUtil from "@/utils/file.js"
	import {mapGetters,mapActions,mapMutations} from "vuex"
	export default {
		data() {
			return {
				select:{
					show:false,
					options:[],
					current:[0]
				},
				bridge:null
			};
		},
		computed:{
			...mapGetters('user',['userInfo']),
			...mapGetters('system',['nickEdit'])
		},
		filters:{
			sex(val){
				if(val==1){
					return '男'
				}else if(val==2){
					return '女'
				}else{
					return '保密'
				}
			}
		},
		methods:{
			...mapMutations('user',['mixUserInfo']),
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			},
			async chooseAvatar(){
				if(this.chooseAvatar.lock){
					return
				}
				uni.$off("uAvatarCropper")
				let file = await new Promise((resolve,reject)=>{
					uni.$once("uAvatarCropper",resolve)
					jumpTo("/uview-ui/components/u-avatar-cropper/u-avatar-cropper?destWidth=600&rectWidth=200&fileType=png")
				})
				try{
					this.chooseAvatar.lock = true
					const avatarUrl = await fileUtil.uploadFile({pre:'head/',file})
					
					await modifyUser({avatarUrl})
					this.mixUserInfo({avatarUrl})
				}catch(e){
					console.error(e)
					toast(e.message||"上传失败,稍后尝试")
				}finally{
					this.chooseAvatar.lock = false
				}
			},
			async chooseGender(){
				if(this.chooseGender.lock){
					return
				}
				const [{label,value:sex}] = await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.select.options =[
						{label:'保密',value:''},
						{label:'男',value:'1'},
						{label:'女',value:'2'}
					]
					this.select.current = [this.select.options.findIndex(({value})=>value==this.userInfo.sex)]
					this.select.show=true
				})
				try{
					console.log(sex)
					this.chooseGender.lock = true
					
					await modifyUser({sex})
					this.mixUserInfo({sex})
				}finally{
					this.chooseGender.lock = false
				}
			},
			toEditNick(){
				if(this.nickEdit){
					jumpTo('/pages/my/archive/nick')
				}else{
					toast('服务器不允许修改，请联系客服人员修改。')
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		display: flex;
		flex-direction: column;
	}
	.group{
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #FFFFFF;
		.label{
			flex: 1;
		}
		.arrow{
			margin-left: 10rpx;
		}
	}
</style>
